/*
 * @Author: szx
 * @Date: 2022-04-29 16:51:57
 * @LastEditTime: 2022-04-29 19:32:37
 * @Description:
 * @FilePath: \learn\React学习\todo-list\src\App.js
 */
import { Component } from 'react';
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import './App.css';

export default class App extends Component {
    state = {
        todos: [
            { id: '001', name: '吃饭', done: false },
            { id: '002', name: '睡觉', done: true },
            { id: '003', name: '打代码', done: false }
        ]
    };

    addTodo = (todoObj) => {
        const { todos } = this.state;
        const newTodos = [todoObj, ...todos];
        this.setState({ todos: newTodos });
    };

    updateTodo = (id, done) => {
        const { todos } = this.state;
        const newTodos = todos.map((todoObj) => {
            if (todoObj.id === id) return { ...todoObj, done: done };
            else return todoObj;
        });
        this.setState({ todos: newTodos });
    };

    deleteTodo = (id) => {
        const { todos } = this.state;
        const newTodos = todos.filter((todoObj) => {
            return todoObj.id !== id;
        });
        this.setState({ todos: newTodos });
    };

    checkAllTodo = (done) => {
        const { todos } = this.state;
        const newTodos = todos.map((todoObj) => {
            return { ...todoObj, done };
        });
        this.setState({ todos: newTodos });
    };

    clearAllDoneTodo = () => {
        const { todos } = this.state;
        const newTodos = todos.filter((todoObj) => !todoObj.done);
        this.setState({ todos: newTodos });
    };
    render() {
        const { todos } = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} clearAllDoneTodo={this.clearAllDoneTodo} />
                </div>
            </div>
        );
    }
}
